import React, { Component } from 'react'
import Toggle from './toggle'
import LoggingButton from './loggingButton'
import Greeting from './greeting'
import LoginControl from './loginControl'
import Mailbox from './mailbox'
import Warning from './warning'
import NumberList from './numberList'
import Blog from './blog'

import './welcome.scss'

class welcome extends Component {
  render() {
    const messages = ['React', 'Re: React', 'Re:Re: React']
    const numbers = [1, 2, 3, 4, 5]
    const posts = [
      { id: 1, title: 'Hello World', content: 'Welcome to learning React!' },
      {
        id: 2,
        title: 'Installation',
        content: 'You can install React from npm.',
      },
    ]
    return (
      <div className="welcome">
        <Greeting isLoggedIn={true} />
        <LoginControl />
        <Toggle />
        <LoggingButton />
        <Mailbox unreadMessages={messages} />
        <Warning />
        <NumberList numbers={numbers} />
        <Blog posts={posts} />
      </div>
    )
  }
}

export default welcome
